<template>
    <div>
        <!-- .stop 的使用 -->
        <!-- <div class="big" @click="bigFn">
            <div class="small" @click.stop="smallFn"></div>
        </div> -->

        <!-- .prevent -->
        <!-- <form action="https://wwww.baidu.com" method="get">
            <input type="text" name="username" v-model="username">
            <input type="text" name="age" v-model="age">
            <button type="submit" @click.prevent="submitFn">提交表单</button>
        </form> -->
        <!-- .self -->
        <!-- <div class="big" @click.self="bigFn">
            <div class="small" @click="smallFn"></div>
        </div> -->
        <!-- .captcha -->
        <!-- <div class="big" @click.capture="bigFn">
            <div class="small" @click="smallFn"></div>
        </div> -->
        <!-- ..once -->
        <!-- <div class="big" @click="bigFn">
            <div class="small" @click.once="smallFn"></div>
        </div> -->
        <!--.passive -->

        <div class="bigbox" @scroll="onScroll">
            <p class="smallbox"></p>
        </div>
    </div>
</template>

<script>
import axios from 'axios';

// 事件修饰符 (语法糖)
// 定义: 主要一哦你过来修饰事件的
// .stop  阻止事件冒泡
// .prevent   阻止默认行为
// .self    只有点击本身才出发事件
// .capture  事件冒泡
// .passive  优化移动端浏览器滚动的
// .once  只能触发一次


export default {
    data() {
        return {
            username: '',
            age: ''
        }
    },
    methods: {
        bigFn() {
            console.log('big');
        },
        smallFn() {

            console.log('small');
        },
        submitFn() {
            axios('https://api.i-lynn.cn/college', {
                params: {
                    username: this.username,
                    age: this.age
                }
            }).then(res => {

            })
        },
        onScroll() {
            console.log('滚动');
        }
    }
}
</script>
<style scoped>
.big {
    width: 200px;
    height: 200px;
    background: red;
}

.small {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

.bigbox {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    overflow: auto;
}

.smallbox {
    width: 100px;
    height: 500px;
    background-color: pink;
}
</style>